<template>
  <div class="page">
    <div class="container">
      <div class="header" v-if="data.header">
        <h1>{{ data.header.title }}</h1>
        <p>{{ data.header.description }}</p>
      </div>
      <!-- <div
          class="card-group"
          v-for="group in data.contents"
          :key="item"
          :style="{ '--columns': group.length }"
        ></div> -->
      <div class="card" v-for="item in data.contents" :key="item">
        <div class="crad-header">
          <div class="crad-title">{{ item.title }}</div>
        </div>
        <div class="content">
          <template v-if="components[item.type]">
            <component :is="components[item.type]" :data="item.data"></component>
          </template>
          <template v-else>
            {{ item.type }}
            {{ item.data }}
          </template>

          <!-- <app-echarts :options="item.options" v-if="item.type == 'chat'" /> -->
          <!-- {{ item.content }} -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import axios from 'axios'

import Overview from './components/Overview.vue'
import BarChart from './components/BarChart.vue'
import PieChat from './components/PieChat.vue'
import List from './components/List.vue'
import Tag from './components/Tag.vue'
import Info from './components/Info.vue'

const components = {
  概览: Overview,
  overview: Overview,

  柱状图: BarChart,
  barChart: BarChart,

  饼图: PieChat,
  pieChat: PieChat,

  标签: Tag,
  文本列表: List,
  信息列表: Info,
}

const data = ref([])

axios.get('/data.json').then(res => {
  data.value = res.data
})
</script>
<style lang="scss" scoped>
.page {
  --gap: 24px;
  --primary: #4361ee;
  --secondary: #3f37c9;
  --danger: #f72585;
  --warning: #ff9e00;
  --success: #4cc9f0;
  --dark: #1b263b;
  --light: #f8f9fa;
  --glass: rgba(255, 255, 255, 0.15);
  --border-radius: 12px;
  --spacing: var(--gap);
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  padding: var(--gap);

  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    sans-serif;
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: white;
  padding: calc(var(--gap) * 1.5);
  border-radius: var(--border-radius);
  margin-bottom: var(--gap);
  box-shadow: 0 10px 20px rgba(67, 97, 238, 0.2);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass);
  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
    transform: rotate(30deg);
  }
}

.card-group {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--border-radius);
  padding: var(--spacing);
  margin-bottom: var(--spacing);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);

  .crad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--spacing) * 0.75);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .crad-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--dark);
    display: flex;
    align-items: center;
  }

  .content {
  }
}
</style>
